<nz-layout>
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate">
    <div class="logo">
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
      <ng-container *ngFor="let nav of navList">
        <li nz-submenu *ngIf="nav && nav.children && nav.children;else navMenu">
          <span title><i nz-icon type="{{nav.icon}}"></i><span>{{nav.name}}</span></span>
          <ul>
            <ng-container *ngFor="let child of nav.children">
              <li nz-menu-item [routerLink]="['/',nav.path,child.path]">{{child.name}}</li>
            </ng-container>
          </ul>
        </li>
        <ng-template #navMenu>
            <li nz-menu-item [routerLink]="['/', nav.path]"><span><i nz-icon type="{{nav.icon}}"></i><span>{{nav.name}}</span></span></li>
        </ng-template>
      </ng-container>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header style="background: #fff; padding:0;">
      <i class="trigger" nz-icon [type]="isCollapsed?'menu-unfold':'menu-fold'" (click)="isCollapsed=!isCollapsed"></i>
    </nz-header>
    <nz-content style="margin:0 16px;">
      <nz-breadcrumb style="margin:16px 0;">
        <!-- <nz-breadcrumb-item>User</nz-breadcrumb-item>
        <nz-breadcrumb-item>Bill</nz-breadcrumb-item> -->
        <app-breadcrumb></app-breadcrumb>
      </nz-breadcrumb>
      <!-- <div style="padding:24px; background: #fff; min-height: 360px;">
      </div> -->
      <router-outlet></router-outlet>
    </nz-content>
    <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>
<ng-template #trigger>
  <i nz-icon type="up"></i>
</ng-template>